<!--
 * @Descripttion: 分类筛选器
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2022年5月26日15:59:52
 * @LastEditors:
 * @LastEditTime:
-->

<template>
	<div class="sc-select-filter">
		<div v-if="data.length<=0" class="sc-select-filter__item">
			<div class="sc-select-filter__item-options">
				<ul><li><span>加载中</span></li></ul>
			</div>
		</div>
		<div v-for="item in data" :key="item.key" class="sc-select-filter__item">
			<div class="sc-select-filter__item-title" :style="{'width':labelWidth+'px'}">
				<label>{{ item.title }}：</label>
			</div>
			<div class="sc-select-filter__item-options">
				<ul>
					<li :class="{'active':selected[item.key]&&selected[item.key].includes(option.value)}"
						v-for="option in item.options" :key="option.value" @click="select(option, item)">
						<el-icon v-if="option.icon">
							<component :is="option.icon"/>
						</el-icon>
						<span>{{ option.label }}</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		data: {type: Array, default: () => []},
		selectedValues: {
			type: Object, default: () => {
				return {}
			}
		},
		labelWidth: {type: Number, default: 80},
		outputValueTypeToArray: {type: Boolean, default: false}
	},
	data() {
		return {
			selected: {}
		}
	},
	watch: {
		data(val) {
			val.forEach(item => {
				this.selected[item.key] = this.selectedValues[item.key] ||
				(Array.isArray(item.options) && item.options.length) ? [item.options[0].value] : []
			})
		},
		selectedValues(val) {
			console.log(val)
			Object.keys(val).forEach((index) => {
				this.selected[index] = val[index].split(',')
			})
		}
	},
	computed: {
		selectedString() {
			let outputData = JSON.parse(JSON.stringify(this.selected))
			for (let key in outputData) {
				outputData[key] = outputData[key].join(",")
			}
			return outputData
		}
	},
	mounted() {
		//默认赋值
		this.data.forEach(item => {
			this.selected[item.key] = this.selectedValues[item.key] ||
			(Array.isArray(item.options) && item.options.length) ? [item.options[0].value] : []
		})
	},
	methods: {
		select(option, item) {
			console.log(option, item)
			//判断单选多选
			if (item.multiple) {
				//如果多选选择的第一个
				if (option.value === item.options[0].value) {
					//就赋值第一个的值
					this.selected[item.key] = [option.value]
				} else {
					//如果选择的值已有
					if (this.selected[item.key].includes(option.value)) {
						//删除选择的值
						this.selected[item.key].splice(this.selected[item.key].findIndex(s => s === option.value), 1)
						//当全删光时，把第一个选中
						if (this.selected[item.key].length == 0) {
							this.selected[item.key] = [item.options[0].value]
						}
					} else {
						//未有值的时候，追加选中值
						this.selected[item.key].push(option.value)
						//当含有第一个的值的时候，把第一个删除
						if (this.selected[item.key].includes(item.options[0].value)) {
							this.selected[item.key].splice(this.selected[item.key].findIndex(s => s === item.options[0].value), 1)
						}
					}
				}
			} else {
				//单选时，如果点击了已有值就赋值
				if (!this.selected[item.key].includes(option.value)) {
					this.selected[item.key] = [option.value]
				} else {
					return false
				}
			}
			this.change()
		},
		change() {
			if (this.outputValueTypeToArray) {
				this.$emit('onChange', this.selected)
			} else {
				this.$emit('onChange', this.selectedString)
			}
		}
	}
}
</script>

<style scoped>
.sc-select-filter {
	width: 100%;
}

.sc-select-filter__item {
	display: flex;
}

.sc-select-filter__item-title {
	width: 80px;
}

.sc-select-filter__item-title label {
	font-size: 14px;
	padding-top: 13px;
	display: inline-block;
	color: #999;
}

.sc-select-filter__item-options {
	flex: 1;
	border-bottom: 1px dashed var(--el-border-color-light);
}

.sc-select-filter__item-options ul {
	display: flex;
	flex-wrap: wrap;
	padding-top: 10px;
}

.sc-select-filter__item-options li {
	list-style: none;
	cursor: pointer;
	height: 28px;
	padding: 0 15px;
	border-radius: 32px;
	margin: 0 10px 10px 0;
	display: flex;
	align-items: center;
	background: var(--el-color-primary-light-9);
}

.sc-select-filter__item-options li .el-icon {
	margin-right: 3px;
	font-size: 16px;
}

.sc-select-filter__item-options li:hover {
	color: var(--el-color-primary);
}

.sc-select-filter__item-options li.active {
	background: var(--el-color-primary);
	color: #fff;
	font-weight: bold;
}

.sc-select-filter__item:last-of-type .sc-select-filter__item-options {
	border: 0;
}

.sc-select-filter__no-data {
	color: #999;
}
</style>
